<!-- src/components/Certificate/template/CertificateTemplatePreview.vue -->
<template>
  <div class="certificate-template-preview">
    <div class="preview-container">
      <!-- 模板预览 -->
      <div class="certificate-preview" :style="previewStyle">
        <div class="certificate-header">
          <div class="avatar-placeholder"></div>
        </div>
        <div class="certificate-body" :style="bodyStyle">
          <div
            v-for="(field, index) in certificateFields"
            :key="index"
            class="preview-field"
            :style="fieldStyle"
          >
            {{ field.label }}
          </div>
          <div
            v-for="(customField, index) in customFields"
            :key="index"
            class="preview-field"
            :style="getFieldStyle(customField)"
          >
            {{ customField.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CertificateTemplatePreview",
  props: {
    templateData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      // 默认字段（仅用于没有模板数据时）
      defaultCertificateFields: [
        { label: "姓名", value: "name" },
        { label: "身份证号", value: "idCard" },
      ],
      certificateFields: [], // 实际显示的字段
      customFields: [],
      format: {
        fontFamily: "SimHei",
        fontSize: "18",
        color: "#000000",
        alignment: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        backgroundColor: "#007aff",
        borderColor: "#dcdfe6",
      },
    };
  },
  computed: {
    previewStyle() {
      // 完善背景图片处理逻辑
      const style = {
        backgroundColor: this.format.backgroundColor || "#007aff",
        border: `10px solid ${this.format.borderColor || "#dcdfe6"}`,
      };

      // 如果有背景图片路径，则设置背景图片
      if (this.templateData?.backgroundUrl) {
        style.backgroundImage = `url(${this.resolveImageUrl(
          this.templateData.backgroundUrl
        )})`;
        style.backgroundSize = "cover";
        style.backgroundRepeat = "no-repeat";
        style.backgroundPosition = "center";
      }

      return style;
    },

    bodyStyle() {
      return {
        textAlign: this.format.alignment,
      };
    },

    fieldStyle() {
      return {
        fontFamily: this.format.fontFamily,
        fontSize: this.format.fontSize + "px",
        color: this.format.color,
        letterSpacing: this.format.letterSpacing + "px",
        lineHeight: this.format.lineHeight,
        textAlign: this.format.alignment,
      };
    },
  },
  watch: {
    templateData: {
      handler(newVal) {
        if (newVal) {
          // 处理传入的模板数据
          this.processTemplateData(newVal);
        } else {
          // 使用默认数据
          this.useDefaultData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 处理传入的模板数据
    processTemplateData(data) {
      // 清空默认字段
      this.certificateFields = [];

      // 处理接口返回的certificateFieldList数据
      if (
        data.certificateFieldList &&
        Array.isArray(data.certificateFieldList)
      ) {
        this.customFields = data.certificateFieldList.map((field) => ({
          label: field.fieldLabel,
          value: field.fieldKey,
          style: {
            fontFamily: field.fontFamily,
            fontSize: field.fontSize + "px",
            color: field.fontColor,
            fontWeight: field.fontWeight,
            fontStyle: field.italic === "true" ? "italic" : "normal",
            textDecoration: field.underline === "true" ? "underline" : "none",
            textAlign: field.textAlign,
            lineHeight: field.lineHeight,
            letterSpacing: field.letterSpacing + "px",
          },
        }));
      } else {
        this.customFields = [];
      }

      // 处理整体模板格式
      if (data.format) {
        this.format = {
          fontFamily: data.format.fontFamily || "SimHei",
          fontSize: data.format.fontSize || "18",
          color: data.format.color || "#000000",
          alignment: data.format.alignment || "center",
          letterSpacing: data.format.letterSpacing || 0,
          lineHeight: data.format.lineHeight || 1.2,
          backgroundColor: data.format.backgroundColor || "#007aff",
          borderColor: data.format.borderColor || "#dcdfe6",
        };
      }
    },

    // 使用默认数据
    useDefaultData() {
      this.certificateFields = this.defaultCertificateFields;
      this.customFields = [];
      this.format = {
        fontFamily: "SimHei",
        fontSize: "18",
        color: "#000000",
        alignment: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        backgroundColor: "#007aff",
        borderColor: "#dcdfe6",
      };
    },

    getFieldStyle(field) {
      return field.style || this.fieldStyle;
    },

    // 解析图片URL，处理相对路径和绝对路径
    resolveImageUrl(url) {
      // 如果是完整的URL(包含协议)，则直接返回
      if (url.startsWith("http://") || url.startsWith("https://")) {
        return url;
      }

      // 如果是相对路径，则添加基础路径
      if (url.startsWith("/")) {
        // 假设后端资源服务地址为 /api
        return `/api${url}`;
      }

      // 其他情况也加上/api前缀
      return `/api/${url}`;
    },
  },
};
</script>

<style scoped>
.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.certificate-preview {
  width: 350px;
  height: 500px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.certificate-header {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.certificate-body {
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  font-size: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.certificate-footer {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: white;
  font-size: 12px;
}

.date-field {
  margin-bottom: 15px;
}

.preview-field {
  margin: 10px 0;
}
</style>

